<!DOCTYPE html>
<html th:lang="${lang}" xmlns:th="http://www.thymeleaf.org" >
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title th:text="${title}"></title>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/bootstrap/css/city-picker.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
      header{width: 100%;}
      header img{width: 100%;}
      header{margin-bottom: 10px;}
      .panel-title{padding: 10px;} 
      label{word-wrap:break-word;word-break:break-all;height: auto;}
      .msg{
        position:fixed;
        left:50%;
        top:50%;
        z-index: 999;
        transform:translate(-50%,-50%);
        background-color: rgba(0,0,0,0.5);
        color: white;
        padding:0.5rem 1rem;
        border-radius: 10px;
        animation: TipLayer 2s;
      }
      #qrcode .p{
        color: rgb(26,68,130);
      }
      #qrcode{
        text-align: center;
      }
      /*<!---->去掉苹果短的样式*/
      input[type="button"], input[type="submit"], input[type="reset"] {
          -webkit-appearance: none;
      }
      textarea {  -webkit-appearance: none;}
    </style>
    <script src="/bootstrap/js/jquery.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <script src="/bootstrap/js/city-picker.data.js"></script>
    <script src="/bootstrap/js/city-picker.js"></script>
    <!-- import Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
      //判断是否为移动端
      function _isMobile() {
        return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      }

      var time=60;

      function timeSet(o){
          time=time-1;
          if(time==0){
              time=60;
              $(o).removeAttr("disabled").removeClass("weui-btn_loading").html("验证码")
          }else{
              $(o).attr('disabled','disabled').html(time+"s后获取").addClass("weui-btn_loading")
              setTimeout(function(){timeSet(o)},1000);
          }
      }
      var json=[(${json})];
      var registerId=[(${id})];
      var disabled=[(${disabled})];
      var sourceId=[(${sourceId})];
      var type=[(${type})];
      var projectId="[(${project})]";
      var email=new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
      var phone=/^1[2-9][0-9]{9}$/;

      $(function(){
        var app = new Vue({
          el: '#app',
          data: {
            className:"container",
            lang:"English",
            title:"注册登记",
            url:"[[${url}]]",
            enable:"[[${english}]]",
            banner:"[[${banner}]]",
            type:type,
            isQrcode:true,
            qrcode:"",
            disabled:disabled,
            text:"现场签到二维码",
            model:{
              registerId:registerId,
              projectId:projectId,
              sourceId:sourceId,
              type:type
            },
            list: json,
            msg:"",
            showMsg:false,
            page:new Array(),
            pageSize:0,
            isValidator:true,
          },
          created(){
            var i=this.page.length;
            this.page[i]=new Array();

            this.list.forEach(element => {
              
              this.page[i].push(element);

              if(element.type==-1){
                i++;
                this.page[i]=new Array();
              }

              if(element.input!=""){
                this.model[element.input]="";
              }

              element.optionList=element.options?element.options.split('|'):null;
              element.englishOptionList=element.englishOption?element.englishOption.split('|'):null;

              if(element.type==4||element.type==0){
                element.value=[];
              }else{
                element.value="";
              }
            });

            if(_isMobile()){
              this.className="container-fluid";
              this.banner="[[${bannerMoblie}]]";
            }
            if(this.url.indexOf("?")>0){
              if("[[${lang}]]"=="en"){
                this.lang="中文"
                this.title="Register Login"
                this.url+="&lang=zh-CN"
              }else{
                this.url+="&lang=en"
              }
            }else{
              if("[[${lang}]]"=="en"){
                this.lang="中文"
                this.title="Register Login"
                this.url+="?lang=zh-CN"
              }else{
                this.url+="?lang=en"
              }
            }
            if(this.lang=="English"){

            }else{
              this.text="On site check-in QR code";
            }
          },
          methods: {
            show(msg){
              this.msg=msg;
              this.showMsg=true;
              setTimeout(() => {
                this.showMsg=false;
              }, 2000);
            },
            verifyCode(indexNo){
              var value=this.list[indexNo-2].value;
              console.log(this.list[indexNo-2].type)
              if(value==null||value==""){
                if(this.lang=='中文'){
                    this.show('please input :'+this.list[indexNo-2].englishName)
                  }else{
                    this.show(this.list[indexNo-2].name+'为必填项')
                  }
                  $("#"+this.list[indexNo-2].input+this.list[indexNo-2].indexNo).focus();
              }else if(this.list[indexNo-2].type==5||email.test(value)){
                if(email.test(value)){
                  $("#"+indexNo).button('loading');
                  timeSet($("#"+indexNo));
                  if(window.location.href.indexOf('itnas.cn')>0){
                    axios.patch('/api/Validator/', {"phone":value,"code":projectId}).then((result) => {
                      $("#"+indexNo).button('reset');
                      if(result.data.hasError){
                        this.show(result.data.message)
                      }else{
                        $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                      }
                    }).catch(function (error) { 
                      $("#"+indexNo).button('reset');
                      if("[[${lang}]]"=="en"){
                        this.show('Send verify code failed. The system has abnormal problems!')
                      }else{
                        this.show('发生验证码失败,请您联系系统管理员!')
                      }
                      $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                    });
                  }else{
                    axios.post('/api/Validator/', "phone="+value+"&code="+projectId).then((result) => {
                      $("#"+indexNo).button('reset');
                      if(result.data.hasError){
                        this.show(result.data.message)
                      }else{
                        $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                      }
                    }).catch(function (error) { 
                      $("#"+indexNo).button('reset');
                      if("[[${lang}]]"=="en"){
                        this.show('Send verify code failed. The system has abnormal problems!')
                      }else{
                        this.show('发生验证码失败,请您联系系统管理员!')
                      }
                      $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                    });
                  }
                }else{
                  if(this.lang=='中文'){
                    this.show('please input E-mail!')
                  }else{
                    this.show('邮箱格式不正确')
                  }
                  $("#"+this.list[indexNo-2].input+this.list[indexNo-2].indexNo).focus();
                }
              }else if(this.list[indexNo-2].type==9||this.list[indexNo-2].input=="phone"||phone.test(value)){
                  if(phone.test(value)){
                    $("#"+indexNo).button('loading');
                    timeSet($("#"+indexNo));
                    if(window.location.href.indexOf('itnas.cn')>0){
                      axios.patch('/api/Validator/', {"phone":value,"code":projectId}).then((result) => {
                        $("#"+indexNo).button('reset');
                        if(result.data.hasError){
                          this.show(result.data.message)
                        }else{
                          $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                        }
                      }).catch(function (error) { 
                        $("#"+indexNo).button('reset');
                        if("[[${lang}]]"=="en"){
                          this.show('Send verify code failed. The system has abnormal problems!')
                        }else{
                          this.show('发生验证码失败,请您联系系统管理员!')
                        }
                        $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                      });
                    }else{
                      axios.post('/api/Validator/', "phone="+value+"&code="+projectId).then((result) => {
                        $("#"+indexNo).button('reset');
                        if(result.data.hasError){
                          this.show(result.data.message)
                        }else{
                          $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                        }
                      }).catch(function (error) { 
                        $("#"+indexNo).button('reset');
                        if("[[${lang}]]"=="en"){
                          this.show('Send verify code failed. The system has abnormal problems!')
                        }else{
                          this.show('发送验证码失败,请您联系系统管理员!')
                        }
                        $("#"+this.list[indexNo-1].input+this.list[indexNo-1].indexNo).focus();
                      });
                    }
                  }else{
                    $("#"+this.list[indexNo-2].input+this.list[indexNo-2].indexNo).focus();
                    if(this.lang=='中文'){
                      this.show('please input Chinese moblie phone!')
                    }else{
                      this.show('手机号码不正确')
                    }
                  }
              }
            },
            save(no,id){
              for(var j=0;j<this.page[no].length;j++){
                if(this.page[no][j].required==1&&this.page[no][j].value.length==0){
                  if(this.lang=='中文'){
                    this.show('please input :'+this.page[no][j].englishName)
                  }else{
                    this.show(this.page[no][j].name+'为必填项')
                  }
                  $("input[name='"+this.page[no][j].input+"']").focus();
                  break;
                }else if(j==(this.page[no].length-1)){
                  this.list.forEach(element => {
                    if(element.input&&element.input!=""&&element.value.length>0){
                      if(element.type==0 || element.type==4){
                        this.model[element.input]=element.value.join(",");
                      }else{
                        this.model[element.input]=element.value;
                      }
                    }
                  });

                  if(this.isValidator){
                    $("#"+id).button('loading');

                    axios.post('/api/Personal/', this.model).then((result) => {
                      $("#"+id).button('reset');
                        if (result.data.hasError) {
                          this.show(result.data.message)
                        } else {
                            for(var i=0;i<this.list.length;i++){
                              if(this.list[i].value instanceof Array){
                                this.list[i].value=this.list[i].value.join('|')
                              }
                            }
                            axios.put('/api/PersonalProperty/'+result.data.data.personalId,this.list).then((res)=>{
                              console.log(res);
                            }).catch(res=>{
                              console.log(res);
                            });
                          if("[[${lang}]]"=="en"){
                            if(result.data.data.verify==0){
                              this.show('Your registration information has been submitted, please wait for system review, The system will inform you by SMS or email!')
                            }else{
                              this.show('Your has been registered successfully!')
                              this.isQrcode=false;
                              this.qrcode="/qrcode/"+result.data.data.code;
                              if("[[${lang}]]"=="en"){
                                this.text=res.data.data.name+",Hello!<br/>you card no:"+res.data.data.code;
                              }else{
                                this.text=res.data.data.name+"，您好！<br/>您的取票码："+res.data.data.code;
                              }
                            }
                          }else{
                            if(result.data.data.verify==0){
                              this.show('您的登记信息已经提交，请等待系统审核，系统将有短信或邮件通知您！')
                            }else{
                              this.show('您的已经登记成功!');
                              this.isQrcode=false;
                              this.qrcode="/qrcode/"+result.data.data.code;
                            }
                          }
                        }
                    }).catch(function (error) { 
                      $("#"+id).button('reset');
                      if("[[${lang}]]"=="en"){
                        this.show('Registration failed. The system has abnormal problems!')
                      }else{
                        this.show('注册失败,请您联系系统管理员!')
                      }
                    });
                  }else{
                    if("[[${lang}]]"=="en"){
                      this.show('The verify code failed,please reset verify code!')
                    }else{
                      this.show('验证码错误,请输入正确的验证码!')
                    }
                  }
                }
              }
            },
            last(no){
              this.pageSize=no-1;
            }, 
            async next(no){
              for(var j=0;j<this.page[no].length;j++){
                if(this.page[no][j].required==1&&this.page[no][j].value.length==0){
                  if(this.lang=='中文'){
                    this.show('please input :'+this.page[no][j].englishName)
                  }else{
                    this.show(this.page[no][j].name+'为必填项')
                  }
                  $("input[name='"+this.page[no][j].input+"']").focus();
                  break;
                }else if(this.page[no][j].type==10){
                  var value=this.page[no][j-1].value;
                  var code=this.page[no][j].value;
                  axios.get('/api/Validator/'+value+"/"+code).then((res)=>{
                    if(res.data.hasError){
                        if("[[${lang}]]"=="en"){
                          this.show('The verify code failed!')
                        }else{
                          this.show(res.data.message)
                        }
                      this.isValidator=false;
                      this.last(this.pageSize);
                    }else{
                      this.isValidator=true;
                      axios.get('/api/Personal/'+type+'/'+projectId+'/'+value+'/').then(res=>{
                        if(res.data.data.code){
                          if(res.data.data.verify==1){
                            if(res.data.data.disabled==0){
                              this.isQrcode=false;
                              this.qrcode="/qrcode/"+res.data.data.code;
                              if("[[${lang}]]"=="en"){
                                this.text=res.data.data.name+",Hello!<br/>you card no:"+res.data.data.code;
                              }else{
                                this.text=res.data.data.name+",您好<br/>您的取票码："+res.data.data.code;
                              }
                            }else{
                              this.isQrcode=false;
                              if("[[${lang}]]"=="en"){
                                this.text="Your ID is disabled ";
                              }else{
                                this.text="您的证件被禁用";
                              }
                            }
                          }else{
                            this.isQrcode=false;
                            if("[[${lang}]]"=="en"){
                              this.text="Your information has not been reviewed";
                            }else{
                              this.text="您的信息还没有审核";
                            }
                          }
                        }
                      }).catch(res=>{
                          console.log(res)
                      })
                    }
                }).catch((res)=>{
                  this.isValidator=false;
                  this.last(this.pageSize); 
                });
                
                }else if(this.page[no][j].type==11){
                  this.list.forEach(element => {
                    if(element.input&&element.input!=""&&element.value.length>0){
                      if(element.type==0 || element.type==4){
                        this.model[element.input]=element.value.join(",");
                      }else{
                        this.model[element.input]=element.value;
                      }
                    }
                  });
                }else if(j==(this.page[no].length-1)){
                  this.pageSize=no+1;
                }
              }
            },
            areaSelect(id){
              $("#"+id).citypicker('reset');
              $(".city-picker-span").click();
            }
          }
        })
      })
    </script>
  </head>
  <body>
    <div id="app">
      <header>
        <img :src="banner">
      </header>
      <main :class="className">
        <div class="row">
          <div class="col-md-12">
            <div class=" panel panel-default">
              <div class="panel-title">
                  <ul class="nav nav-tabs">
                      <li >
                       <H4 class="text-success" v-html="title"></H4>
                      </li>
                      <li class="navbar-right" v-show="enable=='1'" >
                          <a class="btn btn-link" :href="url" v-html="lang"></a>
                      </li>
                  </ul>
              </div>
              <div v-if="disabled==1" class="panel-body text-danger text-center">
                <h2 v-html="lang=='中文'?'The registration channel has been closed. If you have any questions, please contact the organizing committee!':'注册登记通道已经关闭，相关信息请联系组委会!'"></h2>
              </div>
              <div v-else class="panel-body">
                <form v-if="isQrcode" class="form-horizontal">
                  <div v-for="(ps,no) in page">
                    <div v-show="no == pageSize" v-for="(item,i) in ps">
                      <div :id="'item'+i" >
                        <div class="form-group" v-if="item.type==-2" > 
                          <div class="col-sm-offset-2 col-sm-10 text-right">
                            <button v-if="no>0" type="button" v-on:click="last(no)"  class="btn btn-primary" th:text="${lang=='en'?'Prev':'上一页'}"></button>
                            <button type="button" v-on:click="save(no,item.indexNo)" :id="item.indexNo" class="btn btn-primary" th:text="${lang=='en'?'Submit':'提 交'}"></button>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==-1"  >
                          <div class="col-sm-offset-2 col-sm-10 text-center">
                            <button v-if="no>0" type="button" v-on:click="last(no)"  class="btn btn-primary" th:text="${lang=='en'?'Prev':'上一页'}"></button>
                            <button type="button" v-on:click="next(no)"  class="btn btn-primary" th:text="${lang=='en'?'Next':'下一页'}"></button>
                          </div>
                        </div>
                        <div class="form-group text-left"  v-if="item.type==0" >
                          <label v-if="item.required==0" class="col-sm-12" style="height: auto" v-html="lang=='中文'?item.englishName:item.name"></label>
                          <label v-else class="col-sm-12 text-danger"  v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                          <div class="col-sm-12" >
                            <div v-if="lang=='中文'" >
                              <div  v-for="(option,index) in item.englishOptionList">
                                <p>
                                  <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="checkbox" v-model="item.value" :id="item.input+item.indexNo"  :name="item.input" :value="option" >
                                    </span>
                                    <label class="form-control" :for="item.input+index"  style="height: auto;" v-html="option"></label>
                                  </div>
                                </p>
                            </div>
                          </div>
                          <div v-else >
                            <div v-for="(option,index) in item.optionList">
                              <p>
                                <div class="input-group" >
                                  <span class="input-group-addon">
                                    <input type="checkbox" v-model="item.value" :id="item.input+index"  :name="item.input" :value="option" >
                                  </span>
                                  <label class="form-control" :for="item.input+index"  style="height: auto;" v-html="option"></label>
                                </div>
                              </p>
                            </div>
                          </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==1" >
                            <div v-if="item.required==0">
                              <label class="col-sm-2 control-label" :for="item.input" v-html="lang=='中文'?item.englishName:item.name"></label>
                              <div class="col-sm-10" >
                                <input  type="text" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name">
                              </div>
                            </div>
                            <div v-else>
                              <label class="col-sm-2 control-label text-danger" :for="item.input"  v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                              <div class="col-sm-10" >
                                <input  required type="text" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name">
                              </div>
                            </div>
                          </div>
                        <div class="form-group"  v-if="item.type==2" >
                          <label v-if="item.required==1" class="col-sm-2 control-label text-danger" :for="item.input" v-html="(lang=='中文'?item.englishName:item.name)+' *'" ></label>
                          <label v-else class="col-sm-2 control-label" :for="item.input" v-html="lang=='中文'?item.englishName:item.name"></label>
                            <div class="col-sm-10" >
                              <div v-if="lang=='中文'">
                                <div  v-for="(option,index) in item.englishOptionList ">
                                  <p>                                  
                                    <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="radio" :id="item.input+index" v-model="item.value" :name="item.input" :value="option" >
                                    </span>
                                    <label class="form-control"  style="height: auto" v-html="option"></label>
                                  </div>
                                </p>
                            </div>
                          </div>
                          <div v-else>
                            <div v-for="(option,index) in item.optionList">
                              <p>
                                <div class="input-group" >
                                  <span class="input-group-addon">
                                    <input type="radio" :id="item.input+index" v-model="item.value" :name="item.input" :value="option" >
                                  </span>
                                  <label class="form-control"   style="height: auto" v-html="option"></label>
                                </div>
                              </p>
                            </div>
                          </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==3" >
                            <div v-if="item.required==0">
                              <label class="col-sm-2 control-label" :for="item.input+item.indexNo"  v-html="lang=='中文'?item.englishName:item.name"></label>
                              <div class="col-sm-10" >
                                <textarea type="text" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name"></textarea>
                              </div>
                            </div>
                            <div v-else>
                              <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                              <div class="col-sm-10" >
                                <textarea required type="text" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name"></textarea>
                              </div>
                            </div>
                          </div>
                        <div class="form-group"  v-if="item.type==4">
                            <label v-if="item.required==1" class="col-sm-2 control-label text-danger"  v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <label v-else class="col-sm-2 control-label" :for="item.input" v-html="lang=='中文'?item.englishName:item.name"></label>
                            <div class="col-sm-10" >
                              <div v-if="lang=='中文'" >
                                <div v-for="(option,index) in item.englishOptionList">
                                  <p>                                  
                                    <div class="input-group" >
                                      <span class="input-group-addon">
                                        <input type="checkbox" :id="item.input+index" v-model="item.value" :name="item.input" :value="option" >
                                      </span>
                                      <label class="form-control" :for="item.input+index"   style="height: auto" v-html="option"></label>
                                    </div>
                                  </p>
                                </div>
                              </div>
                              <div v-else >
                                <div v-for="(option,index) in item.optionList">
                                  <p>
                                    <div class="input-group" >
                                      <span class="input-group-addon">
                                        <input type="checkbox" :id="item.input+index" v-model="item.value" :name="item.input" :value="option" >
                                      </span>
                                      <label class="form-control" :for="item.input+index"   style="height: auto" v-html="option"></label>
                                    </div>
                                  </p>
                                </div>
                              </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==5">
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"    v-html="lang=='中文'?item.englishName:item.name"></label>
                            <div class="col-sm-10" >
                              <input type="email" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <div class="col-sm-10" >
                              <input required type="email" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==6">
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"  v-html="lang=='中文'?item.englishName:item.name"  ></label>
                            <div class="col-sm-10" >
                              <input type="date" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <div class="col-sm-10" >
                              <input required type="date" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==7">
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"  v-html="lang=='中文'?item.englishName:item.name"  ></label>
                            <div class="col-sm-10" >
                              <input type="time" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <div class="col-sm-10" >
                              <input required type="time" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==8">
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"   v-html="lang=='中文'?item.englishName:item.name" ></label>
                            <div class="col-sm-10" >
                              <input type="number" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <div class="col-sm-10" >
                              <input required type="number" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==9" >
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"  v-html="lang=='中文'?item.englishName:item.name"  ></label>
                            <div class="col-sm-10" >
                              <input type="tel" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"  v-html="(lang=='中文'?item.englishName:item.name)+' *'" ></label>
                            <div class="col-sm-10" >
                              <input required type="tel" v-model="item.value" :id="item.input+item.indexNo" class="form-control" :name="item.input" :placeholder="lang=='中文'?item.englishName:item.name" />
                            </div>
                          </div>
                        </div>
                        <div class="form-group"  v-if="item.type==10" >
                          <div v-if="item.required==0">
                            <label class="col-sm-2 control-label" :for="item.input+item.indexNo"  v-html="lang=='中文'?item.englishName:item.name"></label>
                            <div class="col-sm-10">
                              <div class="input-group">
                                <input type="text" class="form-control" :name="item.input" v-model="item.value" :id="item.input+item.indexNo" th:placeholder="${lang=='en'?'Verify Code':'验证码'}">
                                <span class="input-group-btn">
                                  <button class="btn btn-primary" :id="item.indexNo" v-on:click="verifyCode(item.indexNo)" type="button" th:text="${lang=='en'?'Verify Code':'验证码'}"></button>
                                </span>
                              </div>
                            </div>
                          </div>
                          <div v-else>
                            <label class="col-sm-2 control-label text-danger" :for="item.input+item.indexNo"  v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                            <div class="col-sm-10">
                              <div class="input-group">
                                <input type="text" class="form-control" :name="item.input" required v-model="item.value" :id="item.input+item.indexNo"  th:placeholder="${lang=='en'?'Verify Code':'验证码'}">
                                <span class="input-group-btn">
                                  <button class="btn btn-primary" :id="item.indexNo" v-on:click="verifyCode(item.indexNo)" type="button" th:text="${lang=='en'?'Verify Code':'验证码'}"></button>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group"  v-if="item.type==11">
                        <label v-if="item.required==0" class="col-sm-2 control-label" :for="item.input" v-html="lang=='中文'?item.englishName:item.name"></label>
                        <label v-else class="col-sm-2 control-label text-danger" :for="item.input"   v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                        <div class="col-sm-10" >
                          <div v-if="item.required==0" > 
                              <div  style="position: relative;" >
                                <input :id="item.input+item.indexNo" :name="item.input" v-model="item.value" placeholder="请选择省/市/区" v-on:click="areaSelect(item.input+item.indexNo)" class="form-control " style="width: 100%;"  type="text" >
                              </div> 
                          </div>
                          <div v-else>
                            <div style="position: relative;" >
                              <input :id="item.input+item.indexNo" required :name="item.input" v-model="item.value" placeholder="请选择省/市/区" v-on:click="areaSelect(item.input+item.indexNo)" class="form-control " style="width: 100%;"  type="text" >
                            </div> 
                          </div>
                        </div>
                      </div>
                      <div class="form-group"  v-if="item.type==12">
                        <label v-if="item.required==0" class="col-sm-2 control-label" :for="item.input" v-html="lang=='中文'?item.englishName:item.name"></label>
                        <label v-else class="col-sm-2 control-label text-danger" :for="item.input"  v-html="(lang=='中文'?item.englishName:item.name)+' *'"></label>
                          <div class="col-sm-3" >
                            <p>         
                              <div class="input-group" >
                                <span class="input-group-addon">
                                  <input type="radio" :id="item.input+'0'"  v-model="item.value"  :value="lang=='中文'?'ladies':'男'" :name="item.input" >
                                </span>
                                <label class="form-control" :for="item.input+'0'"  v-html="lang=='中文'?'ladies':'男'"></label>
                              </div>
                            </p>
                        </div>
                        <div class="col-sm-3">
                          <p>
                            <div class="input-group" >
                              <span class="input-group-addon">
                                <input type="radio" :id="item.input+'1'" v-model="item.value"  :value="lang=='中文'?'gentleman':'女'" :name="item.input" >
                              </span>
                              <label class="form-control" :for="item.input+'1'"  v-html="lang=='中文'?'gentleman':'女'"></label>
                            </div>
                          </p>
                        </div>
                        <div class="col-sm-3">
                          <p>
                            <div class="input-group" >
                              <span class="input-group-addon">
                                <input type="radio" :id="item.input+'2'"  v-model="item.value" :value="lang=='中文'?'secret':'保密'" :name="item.input" >
                              </span>
                              <label class="form-control" :for="item.input+'2'"   v-html="lang=='中文'?'secret':'保密'"></label>
                            </div>
                          </p>
                        </div>
                        </div>
                      </div>
                  </div>
                </form>
                <div v-else id="qrcode">
                  <p class="p" v-html="text"></p>
                  <img v-if="qrcode.length>0" :src="qrcode" >
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <footer>
        <template>
          <div v-show="showMsg" class="msg" v-html="msg">
          </div>
        </template>
      </footer>
    </div>
  </body>
</html>